<template>
  <div class="address">
    <div class="text">
      <div class="none" v-if="defaultAddress">您需要先添加收货地址才可提交订单</div>
      <ul v-else>
        <li>
          <span>收<i />货<i />人：</span>{{ defaultAddress.receiver }}
        </li>
        <li><span>联系方式：</span> {{ defaultAddress.contact }}</li>
        <li><span>收货地址：</span> {{ defaultAddress.fullLocation + defaultAddress.address }}</li>
      </ul>
    </div>
    <div class="action">
      <XtxButton class="btn" @click="toggleVisible = true">切换地址</XtxButton>
      <XtxButton class="btn" @click="addVisible = true">添加地址</XtxButton>
    </div>
  </div>

  <XtxDialog title="添加地址" :visible="addVisible" @close="addVisible = false">
    <div class="address-edit">
      <div class="xtx-form">
        <div class="xtx-form-item">
          <div class="label">收货人：</div>
          <div class="field">
            <input v-model="formData.receiver" class="input" placeholder="请输入收货人" />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">手机号：</div>
          <div class="field">
            <input v-model="formData.contact" class="input" placeholder="请输入手机号" />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">地区：</div>
          <div class="field">
            <XtxCity placeholder="请选择所在地区" @change="changeCty" />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">详细地址：</div>
          <div class="field">
            <input v-model="formData.address" class="input" placeholder="请输入详细地址" />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">邮政编码：</div>
          <div class="field">
            <input v-model="formData.postalCode" class="input" placeholder="请输入邮政编码" />
          </div>
        </div>
        <div class="xtx-form-item">
          <div class="label">地址标签：</div>
          <div class="field">
            <input v-model="formData.addressTags" class="input" placeholder="请输入地址标签，逗号分隔" />
          </div>
        </div>
      </div>
    </div>
    <!-- </template> -->
    <template v-slot:footer>
      <XtxButton type="gray" style="margin-right: 20px" @click="addVisible = false">取消</XtxButton>
      <XtxButton type="primary" @click="submit">确认</XtxButton>
    </template>
  </XtxDialog>
</template>
<script>
// import { reactive, ref } from 'vue'
import { addAddress } from '@/api/order'
import { computed, reactive, ref } from 'vue'
export default {
  props: {
    modelValue: {
      type: String,
      default: '',
      required: true
    },
    userAddress: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    // 根据 userAddress 和 modelValue计算出来
    const defaultAddress = computed(() => {
      return props.userAddress.find(it => it.id === props.modelValue)
    })
    // 表单数据 - 添加地址时，接口需要的属性
    const formData = reactive({
      receiver: 'fanyoufu', // 收件人
      contact: '13612345678', // 电话
      address: '黑马程序员',
      postalCode: '433100',
      addressTags: '公司',
      isDefault: 0, // 是否是默认地址

      provinceCode: '', // 省的编号
      cityCode: '', // 市的编号
      countyCode: '', // 区的编号
      fullLocation: '' // 地址的全写
    })

    const addVisible = ref(false)

    const changeCty = address => {
      console.log(address)
      formData.provinceCode = address.provinceCode
      formData.cityCode = address.cityCode
      formData.countyCode = address.countyCode
      formData.fullLocation = address.provinceName + address.cityName + address.countyName
    }

    // 添加新的收获地址
    const submit = async () => {
      // 1. 调用接口
      const res = await addAddress(formData)
      console.log(res)
      // 2. 关闭弹层
      addVisible.value = false

      // 3. 更新视图 -父组件的中的address数据要对应的多一条
      //  方法1：通知父组件重发请求(经典子传父)

      //  方法2：直接修改父组件的数据
      // eslint-disable-next-line vue/no-mutating-props
      props.userAddress.push({
        id: res.result.id,
        ...formData
      })
    }

    return { formData, changeCty, addVisible, submit, defaultAddress }
  }
}
</script>
<style lang="less" scoped>
.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
.xtx-dialog {
  .addressWrapper {
    max-height: 500px;
    overflow-y: auto;
  }
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;
      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }
      > ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}

.address-edit {
  .xtx-form-item {
    display: flex;
    align-items: center;
    width: 700px;
    margin: 0 auto;
    padding-bottom: 25px;
    .label {
      width: 180px;
      padding-right: 10px;
      text-align: right;
      color: #999;
    }
    .field {
      width: 320px;
      height: 50px;
      position: relative;
      .input {
        border: 1px solid #e4e4e4;
        width: 320px;
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
      }
    }
  }
}
</style>
